<template>
  <upload-icon v-if="isUploadFormItem" :iconList="text" />
  <span v-else :title="text" class="tableWrapper-text">
    {{ formatText }}
  </span>
</template>
<script>
  import { computed, defineComponent } from 'vue';
  import dayjs from 'dayjs';
  import UploadIcon from '@/components/table/UploadIcon.vue';
  import { propertyFormatByNumber, propertyFormatByPercentage } from '@/utils/format';
  import { FormComponentKey } from '@/enums/componentKey';

  const uploadKeyList = [FormComponentKey.AlUploadFormPc, FormComponentKey.AlImageUploadFormPc];
  const renderLabelKeyList = [
    FormComponentKey.AntdRadioGroupFormPc,
    FormComponentKey.AntdCheckboxGroupFormPc,
    FormComponentKey.AntdSelectFormPc,
    FormComponentKey.AntdSelectCheckFormPc,
    FormComponentKey.AntdCascadeFormPc,
    FormComponentKey.AntdTreeSelectFormPc,
    FormComponentKey.AlUserFormPc,
    FormComponentKey.AlDepartmentFormPc,
  ];

  export default defineComponent({
    name: 'FormatTd',
    components: {
      UploadIcon,
    },
    props: {
      //列信息
      column: {
        type: Object,
        default: () => {
          return {};
        },
      },
      //内容
      text: {
        type: [Object, String, Number, Array],
      },
    },
    setup(props) {
      const columnBlock = computed(() => {
        return props.column || {};
      });
      const isUploadFormItem = computed(() => {
        return uploadKeyList.includes(columnBlock.value.componentKey);
      });
      const formatText = computed(() => {
        const { componentKey, format } = columnBlock.value;
        let html = props.text;
        if (renderLabelKeyList.includes(componentKey)) {
          return getCheckName();
        }

        switch (componentKey) {
          case FormComponentKey.AntdDatePickerFormPc:
            if (props.text) {
              html = dayjs(props.text).format(format?.value ?? format ?? 'YYYY-MM-DD HH:mm:ss');
            }
            break;
          //  日期区间
          case FormComponentKey.AntdRangePickerFormPc:
            const [start, end] = props.text || [];
            if (start && end) {
              html = `${dayjs(start).format(
                format?.value ?? format ?? 'YYYY-MM-DD HH:mm:ss',
              )} ~ ${dayjs(end).format(format?.value ?? format ?? 'YYYY-MM-DD HH:mm:ss')}`;
            }
            break;
          case FormComponentKey.AlSerialNumberFormPc:
          case FormComponentKey.AlAddressFormPc:
            html = props.text;
            break;
          case FormComponentKey.AntdInputNumberFormPc:
            // 数字输入框组件 手动添加格式化所需要的字段
            if (!format) {
              html = props.text;
            } else {
              const { numberFormatType, currencySymbol, accuracy, thousandthSeparator } = format;
              const decimal = '.';
              if (numberFormatType === 'percent') {
                html = propertyFormatByPercentage(props.text, { decimal, accuracy });
              } else if (numberFormatType === 'number') {
                html = propertyFormatByNumber(props.text, {
                  decimal,
                  accuracy,
                  currencySymbol,
                  thousandthSeparator,
                });
              } else {
                html = props.text;
              }
            }
            break;
        }
        return html;
      });
      const getCheckName = () => {
        let html = [];
        //自定义
        const { text } = props;
        let optionValues = [];
        // 复选框返回的值是数组，要进行处理
        if (text && Array.isArray(text)) {
          optionValues = text;
        } else {
          optionValues = [text];
        }
        optionValues.forEach((item) => {
          if (item !== null && item !== undefined) {
            html.push(item.title ?? item.label ?? item.name ?? '');
          }
        });
        return html.join(',');
      };
      return {
        formatText,
        isUploadFormItem,
      };
    },
  });
</script>
